<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style></style>
  </head>
  <body>
    <button type="button " id="btn" value="">获取验证码</button>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script type="application/javascript">
      var times = 10;
      var btn = document.getElementById("btn");
      var clock;

      btn.onclick = function () {
        btn.disabled = true; //按钮变为不可点击状态
        btn.innerHTML = times + "秒后获取";
        clock = setInterval(doLoop, 1000);
      };

      function doLoop() {
        times--;
        console.log(times);
        if (times > 0) {
          btn.innerHTML = times + "秒后获取";
        } else {
          //清除定时器
          clearInterval(clock);
          btn.disabled = false;
          btn.innerHTML = "获取验证码";
          //重置事件
          times = 10;
        }
      }
    </script>
  </body>
</html>
